<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '格知汇GACC',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="entire">
    <image
      style="position: fixed; top: 0; z-index: -10; width: 100vw; height: 100vh"
      :src="loginBg"
      mode="aspectFill"
    />
    <!--遮罩高级搜索层-->
    <view
      style="
        position: fixed;
        top: 0;
        z-index: 100;
        width: 100vw;
        height: 100vh;
        background-color: rgba(2, 79, 128, 0.97);
      "
      v-if="pageData.advancedSearch.show"
    >
      <view class="search-container2">
        <image
          class="exit-button"
          src="/static/images/icons/productCenter/icon_close.png"
          @click="pageData.advancedSearch.show = false"
        />
        <view class="search-tip">
          <image class="tip-icon" src="/static/images/icons/productCenter/icon_light.png"></image>
          <text class="tip-text">提示：请至少填写一个查询条件进行产品查询</text>
        </view>

        <!-- 产品型号 -->
        <view class="form-item">
          <view class="form-label">产 品 型 号</view>
          <view class="form-input-box">
            <input
              class="form-input"
              type="text"
              placeholder="请输入完整/部分产品型号"
              placeholder-style="color: #8da6bd;"
              v-model="pageData.advancedSearch.model"
            />
          </view>
        </view>

        <!-- 产品编码 -->
        <view class="form-item">
          <view class="form-label">产 品 编 码</view>
          <view class="form-input-box">
            <input
              class="form-input"
              type="text"
              placeholder="请输入完整/部分产品编码"
              placeholder-style="color: #8da6bd;"
              v-model="pageData.advancedSearch.code"
            />
          </view>
        </view>

        <!-- 最大扬程区间 -->
        <view class="form-item">
          <view class="form-label">最大扬程区间</view>
          <view class="form-range">
            <view class="range-input-box">
              <input
                class="range-input"
                type="number"
                placeholder="例：100"
                placeholder-style="color: #8da6bd;"
                v-model="pageData.advancedSearch.liftMin"
              />
            </view>
            <text class="range-unit">m</text>
            <text class="range-separator">-</text>
            <view class="range-input-box">
              <input
                class="range-input"
                type="number"
                placeholder="+∞"
                placeholder-style="color: #8da6bd;"
                v-model="pageData.advancedSearch.liftMax"
              />
            </view>
            <text class="range-unit">m</text>
          </view>
        </view>

        <!-- 提示文本 -->
        <view class="form-tip">
          <text class="form-tip-text">提示：请分别输入所有"最大扬程"的"下限数值"和"上限数值"</text>
          <text class="form-tip-text">
            如："上限数值"不填或填写数值"0"，则默认"最大扬程"上限为+∞
          </text>
        </view>

        <!-- 最大流量区间 -->
        <view class="form-item">
          <view class="form-label">最大流量区间</view>
          <view class="form-range">
            <view class="range-input-box">
              <input
                class="range-input"
                type="number"
                placeholder="例：110"
                placeholder-style="color: #8da6bd;"
                v-model="pageData.advancedSearch.flowMin"
              />
            </view>
            <text class="range-unit">m³/h</text>
            <text class="range-separator">-</text>
            <view class="range-input-box">
              <input
                class="range-input"
                type="number"
                placeholder="+∞"
                placeholder-style="color: #8da6bd;"
                v-model="pageData.advancedSearch.flowMax"
              />
            </view>
            <text class="range-unit">m³/h</text>
          </view>
        </view>

        <!-- 提示文本 -->
        <view class="form-tip">
          <text class="form-tip-text">提示：请分别输入所有"最大流量"的"下限数值"和"上限数值"</text>
          <text class="form-tip-text">
            如："上限数值"不填或填写数值"0"，则默认"最大流量"上限为+∞
          </text>
        </view>

        <!-- 产地选择 -->
        <view class="form-item">
          <view class="form-label">产 地</view>
          <view class="form-select-box" @click="showOriginPicker">
            <text
              class="form-select-text"
              :class="{ placeholder: !pageData.advancedSearch.origin }"
            >
              {{ pageData.advancedSearch.origin || '请选择产地' }}
            </text>
            <image
              class="select-arrow"
              src="/static/images/icons/productCenter/icon_arrow_down.png"
            ></image>
          </view>
        </view>

        <!-- 搜索按钮 -->
        <view class="search-button-container" style="margin-top: 60rpx">
          <button class="dbs-search-button" @click="advancedSearch">DBS产品搜索</button>
        </view>
      </view>
    </view>
    <view class="div1">
      <ProductBackbar
        title="格兰富中国产品中心"
        title-en="Grundfos China Product Center"
        height="120"
      />
      <view class="search-total">
        <view class="advance-search" @click="pageData.advancedSearch.show = true">
          <image
            src="/static/images/icons/productCenter/icon_searchBar.png"
            style="width: 50rpx; height: 50rpx"
          />
          <view>高级搜索</view>
        </view>
        <view class="search-container">
          <view class="search-box">
            <image class="search-icon" src="/static/images/icons/productCenter/icon_search.png" />
            <input
              class="search-input"
              type="text"
              placeholder="请输入关键词进行搜索"
              placeholder-style="color: #8da6bd;"
              v-model="pageData.keyword"
            />
            <view class="search-confirm" @click="searchProducts">点击查询</view>
          </view>
        </view>
      </view>
      <view style="margin-top: 15rpx">
        <divider-white />
        <view style="margin-left: 25rpx">
          <evan-radio v-model="pageData.product" primary-color="#306DE5">
            <text style="font-size: 28rpx; color: white">DBS</text>
          </evan-radio>
        </view>
      </view>
    </view>
    <!--产品搜索结果-->
    <scroll-view
      ref="scrollContainer"
      scroll-y="true"
      class="div2"
      enable-flex="true"
      :style="{ height: pageData.div2Height + 'px' }"
      @scrolltolower="handleScroll"
    >
      <view
        @click="navToProductInfo(item)"
        v-for="(item, index) in pageData.productList"
        :key="index"
      >
        <ProductItem :product="item" />
      </view>
      <!--加载中，到底横幅-->
      <view style="margin-top: 30rpx; padding-bottom: 50rpx">
        <wd-divider color="black">{{ pageData.loading ? '加载中...' : '已经到底了~' }}</wd-divider>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { listBg, loginBg } from '@/static/imgMap'
import ProductBackbar from '@/components/Backbar/ProductBackbar.vue'
import DividerWhite from '@/components/divider/dividerWhite.vue'
import { searchProductList } from '@/service/product/product'
import { onMounted, reactive } from 'vue'

const pageData = reactive({
  tab1: 0,
  tabList1: ['关键字搜索', '高级搜索'],
  loading: false,
  div2Height: 0,
  pageIndex: 1,
  pageSize: 10,
  totalCount: 0,
  keyword: null, // 添加关键词搜索字段
  advancedSearch: {
    show: false,
    model: null,
    code: null,
    liftMin: null,
    liftMax: null,
    flowMin: null,
    flowMax: null,
    origin: null,
  },
  region: ['中国', '丹麦', '匈牙利', '美国', '其他'],
  product: 1,
  productList: [],
  hasMore: true,
})

// 在页面加载时解析URL参数
onLoad((options) => {
  console.log('收到的参数:', options)

  try {
    if (options.searchParams) {
      // 解析JSON参数
      const params = JSON.parse(decodeURIComponent(options.searchParams))

      // 获取搜索类型
      pageData.searchType = params.searchType || 'keyword'

      if (pageData.searchType === 'keyword') {
        // 关键词搜索
        pageData.keyword = params.keyword || ''
      } else if (pageData.searchType === 'advanced') {
        // 高级搜索，将参数填充到高级搜索表单
        pageData.advancedSearch.model = params.model || ''
        pageData.advancedSearch.code = params.code || ''
        pageData.advancedSearch.liftMin = params.liftMin || ''
        pageData.advancedSearch.liftMax = params.liftMax || ''
        pageData.advancedSearch.flowMin = params.flowMin || ''
        pageData.advancedSearch.flowMax = params.flowMax || ''
        pageData.advancedSearch.origin = params.origin || ''
      }
    } else if (options.keyword) {
      // 兼容旧的关键词搜索方式
      pageData.searchType = 'keyword'
      pageData.keyword = decodeURIComponent(options.keyword || '')
    }

    // 在参数解析完成后执行搜索
    fetchProductList()
  } catch (error) {
    console.error('解析参数错误:', error)
    // 出错时仍然尝试执行搜索，可能会使用默认参数
    fetchProductList()
  }
})

// 获取产品列表
const fetchProductList = async () => {
  if (!pageData.hasMore || pageData.loading) return

  pageData.loading = true
  try {
    const params = {
      pageIndex: pageData.pageIndex,
      pageSize: pageData.pageSize,
      isDBS: true,
    }

    // 关键字搜索
    if (pageData.keyword) {
      params.codedesc = pageData.keyword
    }

    // 高级搜索参数
    if (pageData.advancedSearch.model) {
      params.codedesc = pageData.advancedSearch.model
    }
    if (pageData.advancedSearch.code) {
      params.code = pageData.advancedSearch.code
    }
    if (pageData.advancedSearch.liftMin) {
      params.start_maxHead = Number(pageData.advancedSearch.liftMin)
    }
    if (pageData.advancedSearch.liftMax) {
      params.end_maxHead = Number(pageData.advancedSearch.liftMax)
    }
    if (pageData.advancedSearch.flowMin) {
      params.start_maxFlow = Number(pageData.advancedSearch.flowMin)
    }
    if (pageData.advancedSearch.flowMax) {
      params.end_maxFlow = Number(pageData.advancedSearch.flowMax)
    }
    if (pageData.advancedSearch.origin) {
      params.origin = pageData.advancedSearch.origin
    }

    const response = await searchProductList(params)

    if (response && response.data) {
      if (pageData.pageIndex === 1) {
        pageData.productList = response.data.items || []
      } else {
        pageData.productList = [...pageData.productList, ...(response.data.items || [])]
      }

      pageData.totalCount = response.data.totalCount || 0
      pageData.hasMore = pageData.productList.length < pageData.totalCount
    }
  } catch (error) {
    console.error('获取产品列表失败:', error)
    uni.showToast({
      title: '获取产品列表失败',
      icon: 'none',
    })
  } finally {
    pageData.loading = false
  }
}

// 关键字搜索方法
const searchProducts = async () => {
  // if (!pageData.keyword) {
  //   uni.showToast({
  //     title: '请输入搜索关键词',
  //     icon: 'none',
  //   })
  //   return
  // }

  pageData.pageIndex = 1
  pageData.hasMore = true
  pageData.productList = []
  await fetchProductList()
}

// 高级搜索方法
const advancedSearch = async () => {
  const { model, code, liftMin, flowMin, origin } = pageData.advancedSearch

  // // 检查是否至少填写了一个条件
  // if (!model && !code && !liftMin && !flowMin && !origin) {
  //   uni.showToast({
  //     title: '请至少填写一个查询条件',
  //     icon: 'none',
  //   })
  //   return
  // }

  pageData.pageIndex = 1
  pageData.hasMore = true
  pageData.productList = []
  pageData.advancedSearch.show = false
  await fetchProductList()
}

// 显示产地选择器
const showOriginPicker = () => {
  uni.showActionSheet({
    itemList: pageData.region,
    success: (res) => {
      const origins = pageData.region
      pageData.advancedSearch.origin = origins[res.tapIndex]
    },
  })
}

const navToProductInfo = (item) => {
  uni.navigateTo({ url: `/pages-sub/productCenter/productInfo?id=${item.productId}` })
}

const handleScroll = () => {
  if (!pageData.loading && pageData.hasMore) {
    loadMoreData()
  }
}

const loadMoreData = async () => {
  if (pageData.loading || !pageData.hasMore) return

  pageData.pageIndex++
  await fetchProductList()
}

onMounted(async () => {
  // 获取屏幕高度
  uni.getSystemInfo({
    success(res) {
      const screenHeight = res.windowHeight
      uni
        .createSelectorQuery()
        .select('.div1')
        .boundingClientRect((data) => {
          pageData.div2Height = screenHeight - data.height
        })
        .exec()
    },
  })
})
</script>
<style scoped lang="scss">
.entire {
  width: 100%;

  .div1 {
    background-color: rgba(37, 73, 115, 0);

    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 120rpx;
      font-size: large;
      color: #fff;
      background: rgba(37, 73, 115, 0);
    }

    .search-total {
      display: flex;
      align-items: center;

      .advance-search {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: 30rpx;
        font-size: 28rpx;
        color: white;
      }

      .search-container {
        width: 550rpx;
        margin-top: -10rpx;
        margin-left: 30rpx;

        .search-box {
          display: flex;
          align-items: center;
          overflow: hidden;
          background-color: rgba(255, 255, 255, 0);
          border: 2rpx solid #ffffff; /* 添加白色边框，宽度2rpx */
          border-radius: 50rpx;

          .search-icon {
            width: 35rpx;
            height: 35rpx;
            margin-right: 20rpx;
            margin-left: 10rpx;
          }

          .search-input {
            flex: 1;
            height: 30rpx;
            font-size: 28rpx;
            color: #ffffff;
          }

          .search-confirm {
            display: flex;
            align-items: center;
            height: 60rpx;
            padding-right: 20rpx;
            padding-left: 20rpx;
            font-size: 28rpx;
            color: #254973;
            background-color: #ffffff;
          }
        }

        .form-item {
          display: flex;
          align-items: center;
          margin-bottom: 30rpx;
        }

        .form-label {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 200rpx;
          height: 50rpx;
          margin-right: 20rpx;
          font-size: 28rpx;
          color: #ffffff;
          background-color: rgba(255, 255, 255, 0);
          border-color: white;
          border-style: solid;
          border-width: 2px;
          border-radius: 10rpx;
        }

        .form-input-box {
          display: flex;
          flex: 1;
          align-items: center;
          height: 58rpx;
          padding-left: 10rpx;
          background-color: rgba(255, 255, 255, 0.1);
          border: none;
          border-radius: 10rpx;
        }

        .form-input {
          width: 100%;
          height: 50rpx;
          font-size: 28rpx;
          color: #ffffff;
          background-color: transparent;
        }

        .range-input {
          flex: 1;
          height: 58rpx;
          font-size: 28rpx;
          color: #ffffff;
          background-color: transparent;
        }

        .form-range {
          display: flex;
          flex: 1;
          align-items: center;
        }

        .range-input-box {
          display: flex;
          flex: 1;
          align-items: center;
          height: 58rpx;
          padding-left: 10rpx;
          background-color: rgba(255, 255, 255, 0.1);
          border: none;
          border-radius: 10rpx;
        }

        .form-select-box {
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: space-between;
          padding: 15rpx 20rpx;
          background-color: rgba(255, 255, 255, 0.1);
          border: none;
          border-radius: 10rpx;
        }

        .form-select-text {
          font-size: 28rpx;
          color: #ffffff;
        }

        .placeholder {
          color: #8da6bd;
        }

        .select-arrow {
          width: 30rpx;
          height: 30rpx;
        }

        .search-button-container {
          display: flex;
          justify-content: center;

          .dbs-search-button {
            width: 300rpx;
            height: 80rpx;
            font-size: 32rpx;
            font-weight: bold;
            color: #254973;
            background-color: #ffffff;
            border: none;
            border-radius: 50rpx;
          }
        }
      }
    }
  }

  .div2 {
    width: 100%;
    overflow-y: scroll;
  }
}

.search-container2 {
  padding: 30rpx;
  margin-top: 190rpx;

  .exit-button {
    width: 50rpx;
    height: 50rpx;
    margin-left: 650rpx;
  }

  .search-tip {
    display: flex;
    align-items: center;
    margin-top: 130rpx;
    margin-bottom: 30rpx;

    .tip-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }

    .tip-text {
      font-size: 28rpx;
      color: #8da6bd;
    }
  }

  .search-box {
    display: flex;
    align-items: center;
    padding: 10rpx;
    margin-bottom: 60rpx;
    background-color: rgba(255, 255, 255, 0);
    border: 2rpx solid #ffffff; /* 添加白色边框，宽度2rpx */
    border-radius: 50rpx;

    .search-icon {
      width: 50rpx;
      height: 50rpx;
      margin-right: 20rpx;
      margin-left: 5rpx;
    }

    .search-input {
      flex: 1;
      height: 50rpx;
      font-size: 28rpx;
      color: #ffffff;
    }
  }

  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
  }

  .form-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200rpx;
    height: 50rpx;
    margin-right: 20rpx;
    font-size: 28rpx;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0);
    border-color: white;
    border-style: solid;
    border-width: 2px;
    border-radius: 10rpx;
  }

  .form-input-box {
    display: flex;
    flex: 1;
    align-items: center;
    height: 58rpx;
    padding-left: 10rpx;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 10rpx;
  }

  .form-input {
    width: 100%;
    height: 50rpx;
    font-size: 28rpx;
    color: #ffffff;
    background-color: transparent;
  }

  .range-input {
    flex: 1;
    height: 58rpx;
    font-size: 28rpx;
    color: #ffffff;
    background-color: transparent;
  }

  .form-range {
    display: flex;
    flex: 1;
    align-items: center;
  }

  .range-input-box {
    display: flex;
    flex: 1;
    align-items: center;
    height: 58rpx;
    padding-left: 10rpx;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 10rpx;
  }

  .form-select-box {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    padding: 15rpx 20rpx;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 10rpx;
  }

  .form-select-text {
    font-size: 28rpx;
    color: #ffffff;
  }

  .placeholder {
    color: #8da6bd;
  }

  .select-arrow {
    width: 30rpx;
    height: 30rpx;
  }

  .search-button-container {
    display: flex;
    justify-content: center;

    .dbs-search-button {
      width: 300rpx;
      height: 80rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #254973;
      background-color: #ffffff;
      border: none;
      border-radius: 50rpx;
    }
  }
}

.range-unit {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #ffffff;
}

.range-separator {
  margin: 0 20rpx;
  font-size: 32rpx;
  color: #ffffff;
}

.form-tip {
  margin-bottom: 30rpx;
}

.form-tip-text {
  display: block;
  font-size: 24rpx;
  line-height: 1.5;
  color: #8da6bd;
}
</style>
